import {defineComponent, ref} from "vue";
import "./css/index.css"
import {OrdersStore} from "@/stores/orders";
import {storeToRefs} from "pinia";

export default defineComponent({
    props:{
        visible: {
            type: Object, default: {}
        },
        handleSupport:{
            type: Function, default: () => {}
        },
        diaForm:{
            type: Object, default: {}
        }
    },
    setup(props) {

        const formRef = ref(null)
        const rules = {
            money: [
                {required: true, message: '请输入期望金额', trigger: 'blur'},
                {type: 'number', message: '请输入数字值', trigger: 'blur'},
            ],
        }
        const handleClose = () => {
            props.visible.value = false
        }


        return () => {
            return <>
                <el-dialog
                    title="提示"
                    v-model={props.visible.value}
                    width="30%"
                    before-close={handleClose}
                >

                    <el-form
                        model={props.diaForm}
                        ref={formRef}
                        rules={rules}
                        label-width={'120px'}>
                        <el-form-item label={"期望金额"} prop={'money'}>
                            <el-input-number style={{width:'200px'}}
                                             precision={2}
                                             v-model={props.diaForm.money}
                                             placeholder="请输入支持金额"/>
                        </el-form-item>
                    </el-form>
                    <div className={"diaFooter"}>
                        <el-button onClick={handleClose}>取 消</el-button>
                        <el-button type="primary" onClick={props.handleSupport}>确 定</el-button>
                    </div>
                </el-dialog>
            </>
        }
    }
})